<template>
  <el-dialog
      v-model="dialogVisible"
      title="详细信息"
  >
    <el-form :inline="true" :model="formInline" class="demo-form-inline" :label-width="90">
      <el-form-item label="姓名">
        <el-input :disabled="true" v-model="formInline.name" placeholder="请输入姓名" clearable/>
      </el-form-item>
      <el-form-item label="性别">
        <el-select :disabled="true" v-model="formInline.sex" placeholder="Select" size="large">
          <el-option
              v-for="item in sexOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="年龄">
        <el-input :disabled="true" v-model="formInline.age" placeholder="请输入年龄" clearable/>
      </el-form-item>
      <el-form-item label="出生年月">
        <el-date-picker
            :disabled="true"
            v-model="formInline.birth"
            type="date"
            placeholder="请输入出生年月"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
        />
      </el-form-item>
      <el-form-item label="婚姻状况">
        <el-select :disabled="true" v-model="formInline.marriage" placeholder="请选择婚姻状况">
          <el-option
              v-for="item in marriageOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="民族">
        <el-input :disabled="true" v-model="formInline.nation" placeholder="请输入民族" clearable/>
      </el-form-item>
      <el-form-item label="身份证号码">
        <el-input :disabled="true" v-model="formInline.userId" placeholder="请输入身份证号码" clearable/>
      </el-form-item>
      <el-form-item label="联系方式">
        <el-input :disabled="true" v-model="formInline.phoneNumber" placeholder="请输入联系方式" clearable/>
      </el-form-item>
      <el-form-item label="邮箱地址">
        <el-input :disabled="true" v-model="formInline.email" placeholder="请输入邮箱地址" clearable/>
      </el-form-item>
      <el-form-item label="部门">
        <el-cascader
            :disabled="true"
            ref="cascaderRef"
            :show-all-levels="false"
            v-model="formInline.depId"
            :options="caserData"
            :placeholder="'请选择部门'"
            :props="cascaderProps"
            @change="handleChange"
        />

      </el-form-item>
      <el-form-item label="岗位">
        <el-select v-model="formInline.partId" :disabled="true" placeholder="请选择岗位">
          <el-option
              v-for="item in partOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>

      </el-form-item>
      <el-form-item v-show="false">
        <el-input v-model="formInline.snowId"></el-input>
      </el-form-item>
    </el-form>


    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref, computed } from 'vue'

const emit = defineEmits(['update:showDialog'])
const props = defineProps({
  showDialog: {
    type: Boolean,
    default: false
  },
  curRow: {
    type: Boolean,
    default: false
  }
})

const dialogVisible = computed({
  get() {
    return props.showDialog
  },
  set(v) {
    emit('update:showDialog', v)
  }
})

const formInline = ref({
  name: '',
  sex: '',
  age: '',
  birth: '',
  marriage: '',
  nation: '',
  userId: '',
  phoneNumber: '',
  depId: '',
  partId: '',
  email: '',
})

const sexOptions = ref([
  {
    label: '男',
    value: '0'
  },
  {
    label: '女',
    value: '1'
  }
])

const marriageOptions = ref([
  {
    label: '未婚',
    value: '0'
  },
  {
    label: '已婚',
    value: '1'
  }

])

const cascaderProps = {
  emitPath: false,
  checkStrictly: true,
}

</script>


<style scoped lang="less">

</style>